<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            text-align: center;;
        }

        #myCanvas {
            width: 80%;
            height: 60%;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="container">
    <canvas id="myCanvas"></canvas>
</div>
<div>
    <button type="button" onclick="Right90()">+90</button>
    <button type="button" onclick="Left90()">-90</button>
</div>
<script type="text/javascript">
    /*var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");*/
    var frame= window.requestAnimationFrame;
    console.log(typeof frame);
    var img = new Image();
    img.onload=function(){
       var canvas=document.getElementById("myCanvas");
        canvas.width=img.width;
        canvas.height=img.height;
        canvas.getContext("2d").drawImage(img,0,0);
        return canvas;
    }
    img.src = '../images/1.jpg';
    //ctx.drawImage(img, 0, 0);
    function Right90(){
        var canvas=document.getElementById("myCanvas");
        var ctx=canvas.getContext("2d");
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();
        ctx.translate(canvas.width/2 , canvas.height/2);
        var rth=Math.atan2(canvas.width/2,canvas.height/2)*180/Math.PI;
        console.log(rth);
        ctx.rotate(rth);

        ctx.drawImage(image,0,0);
        ctx.restore();
        //console.log(90);
    }
    function Left90(){
        var ctx=document.getElementById("myCanvas").getContext("2d");
        console.log(-90);
    }
</script>
</body>
</html>